<template>
    <div>
        <h4><router-link to="/business/course">{{course.name}}</router-link></h4>
        <p>
            <button @click="list(1)" class="btn btn-white btn-default btn-round">
				<i class="ace-icon fa fa-refresh"></i>
					刷新
			</button>
            &nbsp;&nbsp;
            <button @click="addModel()" class="btn btn-white btn-default btn-round">
				<i class="ace-icon fa fa-refresh"></i>
					新增
			</button>
        </p>
        <pagination ref="pagination" v-bind:list="list"></pagination> 
        <!-- PAGE CONTENT BEGINS -->
        <table id="simple-table" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>课程ID</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="chapter in chapters" :key="chapter.id">
                    <td>{{chapter.id}}</td>
                    <td>{{chapter.name}}</td>
                    <td>{{chapter.courseId}}</td>
                    <td>
                         <div class="hidden-sm hidden-xs btn-group">
                            <button v-on:click="toSection(chapter)" class="btn btn-white btn-xs btn-info btn-round">
                                小节
                            </button>&nbsp;
                            <button v-on:click="editModel(chapter)" class="btn btn-white btn-xs btn-info btn-round">
                                编辑
                            </button>&nbsp;
                            <button v-on:click="del(chapter.id)" class="btn btn-white btn-xs btn-warning btn-round">
                                删除
                            </button>
                        </div>
                        <div class="hidden-md hidden-lg">
                            <div class="inline pos-rel">
                                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                </button>

                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
    
                                <li v-on:click="toSection(chapter)">
                                    <a   class="tooltip-success" data-rel="tooltip" title="View">
                                    <span class="blue">
                                        <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                    </span>
                                    </a>
                                </li>
                                <li v-on:click="editModel(chapter)">
                                    <a   class="tooltip-success" data-rel="tooltip" title="Edit">
                                    <span class="green">
                                        <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                    </span>
                                    </a>
                                </li>

                                <li v-on:click="del(chapter.id)">
                                    <a  class="tooltip-error" data-rel="tooltip" title="Delete">
                                    <span class="red">
                                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                    </span>
                                    </a>
                                </li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- Modal -->
        <div class="modal fade" id="chapter-form" tabindex="10" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">名称</label>
                        <input v-model="chapter.name" autocomplete="off" type="text" class="form-control" id="exampleInputEmail1" placeholder="名称">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">课程</label>
                        <input disabled v-model="course.id" autocomplete="off" type="text" class="form-control" id="exampleInputPassword1" placeholder="课程ID">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button @click="save()" type="button" class="btn btn-primary">保存</button>
            </div>
            </div>
        </div>
        </div>
    </div><!-- /.span -->
</template>
<script>
  import pagination from '../../components/pagination'
  import Toast from '../../../public/static/js/toast'
  import Loading from '../../../public/static/js/loading'
  import Confirm from '../../../public/static/js/confirm'
  import Validator from '../../../public/static/js/validator'
  import Tool from "../../../public/static/js/tool";

  export default {
    components: { pagination },
    name: "chapter",
    data() {
        return {
            base: `${process.env.VUE_APP_BASE_URL}/business`,
            chapter: {},
            chapters: [],
            course: {}
        }
    },

     mounted: function() {
        // 调用父组件的activeSidebar方法
        this.$parent.activeSidebar("business-course-sidebar")
        let _this = this;
        // 初始化每页条数
        _this.$refs.pagination.size = 10

        // 获取session中的course信息,使用{}防止初始访问chapter没有course内容用{}.name而不是null.name而报错
        let course = SessionStorage.get(SESSION_KEY_COURSE) || {}
        if(Tool.isEmpty(course)) {
            _his.$router.push('/welcome')
        }
        _this.course = course
        _this.list(1);
    },
    methods: {
        addModel() {
            let _this = this
            _this.chapter = {}
            $('#chapter-form').modal("show")
        },
        list(page) {
            let _this = this;
            Loading.show()
            _this.$axios.get(`${_this.base}/admin/chapters`, {
                params: {
                    page: page,
                    size: _this.$refs.pagination.size,
                    courseId: _this.course.id
                }
            }).then(res => {
                Loading.hide()
                _this.chapters = res.data.data.list
                _this.$refs.pagination.render(page, res.data.data.total)
            })
        },
        save() {
            let _this = this;
            if (!Validator.require(_this.chapter.name, '名称')) {
                return
            }
            _this.chapter.courseId = _this.course.id
            Loading.show()
            _this.$axios.post(`${_this.base}/admin/chapters`, _this.chapter).then(res => {
                Loading.hide()
                if(res.data.success) {
                    $('#chapter-form').modal("hide")
                    Toast.success("添加成功")
                    _this.list(_this.$refs.pagination.page)
                } else{ 
                    Toast.error("添加失败")
                }
            })
        },
        editModel(chapter) {
            let _this = this;
            // 使用空对象复制，防止编辑时直接修改data的属性(vue双向绑定会即时渲染)
            _this.chapter = $.extend({}, chapter)
            $('#chapter-form').modal("show")
        },
        del(chapterId) {
            Confirm.show('确定要删除吗?', () => {
                let _this = this;
                Loading.show()
                _this.$axios.delete(`${_this.base}/admin/chapters/${chapterId}`).then(res => {
                    Loading.hide()
                    if(res.data.success) {
                        Toast.success("删除成功")
                        _this.list(_this.$refs.pagination.page)
                    }else {
                        Toast.error("删除失败")
                    }
                })
            })
        },
        toSection(chapter) {
            let _this = this;
            SessionStorage.set(SESSION_KEY_CHAPTER, chapter)
            _this.$router.push("/business/section")
        }
    }
  }
</script>